<template>
  <div class="login-container">
    <div class="login-box">
      <img src="/src/assets/dreamtour的logo.png" alt="梦游纪 Logo" class="logo" />
      <el-card class="login-card">
        <h1>后台管理系统</h1>
        <el-form @submit.native.prevent="handleLogin">
          <el-form-item>
            <el-input v-model="phone" placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="password" type="password" placeholder="请输入密码"></el-input>
          </el-form-item>
          <div style="display: flex; justify-content:center">
            <el-form-item>
              <el-button type="primary" native-type="submit" @click="handleLogin">登录</el-button>
              <el-button @click="goToRegister">注册</el-button>
            </el-form-item>
          </div>
        </el-form>
        <p class="agreement" font-size="14px">
          登录代表您已同意
          <el-link href="#">用户协议</el-link>和
          <el-link href="#">隐私政策</el-link>
        </p>
      </el-card>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';

const phone = ref('');
const password = ref('');
const router = useRouter();


axios.defaults.baseURL = 'http://localhost:8088/administrators'; // 根据后端地址调整

const handleLogin = async () => {
  console.log("发送的手机号:", phone.value);  // 打印前端发送的手机号

  // 校验手机号格式（只允许数字，且长度为 11 位）
  const phonePattern = /^[0-9]{11}$/; // 假设手机号是11位数字
  if (!phone.value || !password.value) {
    ElMessage.error('请输入手机号和密码');
    return;
  }

  if (!phonePattern.test(phone.value)) {
    // 判断手机号长度是否为11位
    if (phone.value.length !== 11) {
      ElMessage.error('手机号应为11位数字');
    } else {
      ElMessage.error('手机号应为纯数字');
    }
    return;
  }

  try {
    const response = await axios.post('/login', {  // 调用管理员登录接口
      adminPhone: phone.value,   // 使用 adminPhone 代替 uPhone
      adminPwd: password.value   // 使用 adminPwd 代替 uPwd
    });

    // 根据后端返回的 message 字段判断
    if (response.data.message === '登录成功') {
      ElMessage.success('登录成功');

      // 获取权限等级和 adminId
      const authorityLevel = response.data.authorityLevel;
      const adminId = response.data.adminId;

      // 保存登录状态到 localStorage
      localStorage.setItem('loggedIn', 'true');
      localStorage.setItem('authorityLevel', authorityLevel);  // 存储权限信息
      localStorage.setItem('adminId', adminId);  // 存储 adminId

      // 权限判断并跳转
      if (String(authorityLevel) === '4') {
        console.log('权限等级为 4，跳转到 /system/user');
        router.push('/system/user');  // 权限为 4 跳转到 UserView
      } else {
        console.log('权限等级不为 4，跳转到 /system/home');
        router.push('/system/home');  // 其他权限跳转到首页
      }
    } else {
      ElMessage.error(response.data.message);  // 错误消息返回的是 message 字段
    }
  } catch (error) {
    console.error('登录失败:', error);
    ElMessage.error('登录失败，请检查您的手机号和密码。');
  }
};





const goToRegister = () => {
  router.push('/register');
};
</script>

<style scoped>

.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #C4D7D6;
}

.login-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.login-card {
  width: 350px;
  padding: 10px;
}

.logo {
  width: 300px; /* 设置 logo 的宽度 */
  height: auto; /* 保持 logo 的宽高比 */
  margin-bottom: 20px; /* logo 与 card 之间的间距 */
}


.agreement {
  margin-top: 10px;
  font-size: 14px; /* 设置段落的字体大小 */
}

.agreement .el-link {
  font-size: 14px; /* 确保链接的字体大小与段落一致 */
  color: blue; /* 设置链接的文本颜色为蓝色 */
}

.agreement .el-link:hover {
  color: darkblue; /* 可选：设置鼠标悬停时链接的颜色 */
}

/* 确保成功消息是绿色 */
.el-message--success {
  background-color: #f0f9eb !important;
  border-color: #67c23a !important;
  color: #67c23a !important;
}

/* 确保错误消息是红色 */
.el-message--error {
  background-color: #fef0f0 !important;
  border-color: #f56c6c !important;
  color: #f56c6c !important;
}

</style>
